<template>
    <el-container class="base_unit_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent">
                    <template slot="right_search">
                        <el-form-item label="启用状态" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-select v-model="searchForm.state" placeholder="请选择"
                                       @change="getList(true)" class="w100"
                                       style="margin-right: 5px;" clearable>
                                <el-option v-for="(item, index) in stateList"
                                           :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </template>
                </headerTemplate>
                <vxe-table-template :data="dataList" :options.sync="tableOptions"
                                    @event="handleTableEvent" />
            </el-card>
        </el-main>

        <component-dialog dialog-drag :options="componentDialogOption" />
    </el-container>
</template>

<script>
import baseUnitApi from "@common/api/base/baseUnitApi";
import UnitForm from "../dialog/UnitForm";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "Unit",
    data() {
        let $this = this;
        return {
            searchForm: {
                state: '',
            },
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            $this.getList();
                        },
                    },
                    {
                        id: "add",
                        icon: "fa fa-plus",
                        type: "primary",
                        show: true,
                        permission: "save_base_unit",
                        method: () => {
                            $this.openDialog(null, "add");
                        },
                    },
                    {
                        id: "edit",
                        icon: "fa fa-pencil",
                        type: "success",
                        show: true,
                        permission: "save_base_unit",
                        method: () => {
                            $this.openDialog(null, "edit");
                        },
                    },
                    {
                        id: "delete",
                        icon: "fa fa-trash-o",
                        type: "danger",
                        show: true,
                        permission: "del_base_unit",
                        method: () => {
                            $this.delUnit(null, "batch");
                        },
                    },
                ],
            },
            stateList: [
                { label: '全部', value: '' },
                { label: '启用', value: 1 },
                { label: '不启用', value: 0 },
            ],
            dataList: [],
            selectionList: [],
            tableOptions: {
                ref: "UnitTable",
                container: ".base_unit_container",
                multiSelect: true,
                columns: [
                    {
                        label: "名称",
                        prop: "name",
                        align: "center",
                    },
                    {
                        label: "排序",
                        prop: "sn",
                        align: "center",
                    },
                    {
                        label: "启用状态",
                        prop: "state",
                        align: "center",
                        width: 130,
                        render(h, { row, column }) {
                            return h("el-switch", {
                                props: {
                                    value: row[column.prop] === 1,
                                },
                                on: {
                                    change(value) {
                                        $this.$set(row, column.prop, value === true ? 1 : 0);
                                        $this.saveRow(row);
                                    },
                                },
                            });
                        },
                    },
                ],
                operates: {
                    list: [
                        {
                            id: "info",
                            icon: "fa fa-pencil",
                            type: "success",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            permission: "save_base_unit",
                            method: (index, row) => {
                                $this.openDialog(row, "edit");
                            },
                        },
                        {
                            id: "info",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "删除",
                            },
                            permission: "del_base_unit",
                            method: (index, row) => {
                                $this.delUnit(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                },
            },
        };
    },
    mounted() {
        this.getList(true);
    },
    methods: {
        handleHeaderEvent(event) {
            let $this = this;
            $this.searchForm = $.extend({}, $this.searchForm, event.searchForm);
            if (event.type === "search") {
                $this.getList(true);
            } else if (event.type === "refresh") {
                $this.getList(true);
            }
        },
        getList(search) {
            let $this = this;
            $this.dataList = [];
            if (search) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let queryData = $this.getQueryParams($this.tableOptions, $this.searchForm);
            baseUnitApi.findBaseUnits(queryData, result => {
                $this.dataList = result.data || [];
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        openDialog(row, type) {
            const _this = this;
            let title = type === 'add' ? '创建' : '编辑';
            if (!row) {
                if (type === 'add') {
                    row = {state: 1};
                }
                if (type === 'edit') {
                    if (!_this.checkSelection(_this.selectionList)) {
                        return;
                    }
                    row = $.extend({}, _this.selectionList[0]);
                }
            }
            _this.openComponentDialog({
                width: '600px',
                title,
                component: UnitForm,
                propsData: {
                    row,
                },
                callback() {
                    _this.getList();
                },
            });
        },
        //删除
        delUnit(row, type) {
            let $this = this;
            let sids = [];
            if (type === "batch") {
                if ($this.selectionList.length === 0) {
                    $this.$message.error("请选中一条数据");
                    return;
                } else {
                    sids = $this.selectionList.map((item) => item.sid);
                }
            } else {
                sids.push(row.sid);
            }
            $this.confirmDel(sids);
        },
        confirmDel(sids) {
            let $this = this;
            $this.$confirm("是否继续删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                baseUnitApi.batchDelUnit({ sids }, () => {
                    $this.getList();
                    $this.$message.success("删除成功");
                });
            }).catch(() => {
            });
        },
        saveRow(row) {
            let $this = this;
            baseUnitApi.saveBaseUnit(row, (result) => {
                $this.getList(true);
                $this.$message.success("保存成功！");
            });
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.base_unit_container {
    height: 100%;

    .buttons {
        margin: 0 0 10px 0;
    }
}
</style>
